<template>
  <div>
    <div>
      <!--    面包屑导航区-->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>积分管理</el-breadcrumb-item>
        <el-breadcrumb-item>积分兑换</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
       <h2 class="section-title">兑换商品</h2>

      <div class="card">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,index) in goodsList">
            <div class="grid-content bg-purple">
            <div class="pricing pricing-highlight">
              <div class="pricing-title">
                <font size="4">{{item.goodsName}}</font>
              </div>
              <div class="pricing-padding">
                <div class="pricing-price">
                  <div>¥<b>{{item.goodsPoint}}</b><font size="2"><font color="#888FE3"><strong>/次</strong></font></font></div>

                  <div><font size="2"></font></div>
                </div>
                <div class="pricing-details">
                  <div class="pricing-item">
                    <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                    <div class="pricing-item-label">{{item.goodsIntroduce}}</div>
                  </div>

                  <div class="pricing-item">
                    <div class="pricing-item-icon"><i class="fas fa-check"></i></div>
                    <div class="pricing-item-label">库存：{{item.goodsNumber < 0 ? 0:item.goodsNumber}}</div>
                  </div>

                </div>
              </div>

              <div class="pricing-cta" v-if="item.goodsNumber <= 0">
                <a href="javascript:void(0);" data-toggle="modal"  data-target="#legacy-modal-1"  style="background-color: #6c757d;">库存不足 </a>
              </div>

              <div class="pricing-cta" v-else-if="item.goodsPoint <= point">
                <a href="javascript:void(0);" data-toggle="modal" class="exchangeBtn" data-target="#legacy-modal-1" @click="exchangeGoods(item)">兑换 <i class="el-icon-right fas fa-arrow-right" style="font-size: 20px"></i></a>
              </div>

              <div class="pricing-cta" v-else-if="item.goodsPoint > point">
                <a href="javascript:void(0);" data-toggle="modal"  style="background-color: #ffa426;" data-target="#legacy-modal-1">积分不足</a>
              </div>
            </div>
          </div></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsInfo, exchange } from '@/api/point'
export default {
  name: 'ExchangeGoods',
  data () { // 选项 / 数据
    return {
      goodsList: [],
      point: 0
    }
  },
  methods: {
    routeChange: function () { // 展示页面信息
      const that = this
      getGoodsInfo().then((response) => {
        that.goodsList = response.goodsInfo
        that.point = response.point
      }).catch(() => { })
    },
    exchangeGoods: function (item) {
      const that = this
      this.$confirm('是否要花费' + item.goodsPoint + '积分兑换' + item.goodsName, '兑换提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 兑换商品
        exchange(item.id).then((response) => {
          if (response.code) {
            this.$alert(response.msg, '错误提示', {
              confirmButtonText: '确定',
              type: 'error'
            }).then(() => {
              window.location.reload()
            })
          } else {
            this.$alert('你已成功花费' + item.goodsPoint + '积分,兑换' + item.goodsName, '兑换成功', {
              confirmButtonText: '确定',
              type: 'success'
            }).then(() => {
              window.location.reload()
            })
          }
        }).catch(() => {
        //
        })
      })
    }
  },
  created () {
    this.routeChange()
  }
}
</script>

<style scoped>
 .section-title {
  font-size: 18px;
  color: #191d21;
  font-weight: 600;
  position: relative;
  margin: 30px 0 25px;
}
 .section-title:before {
  content: ' ';
  border-radius: 5px;
  height: 8px;
  width: 30px;
  background-color: #6777ef;
  display: inline-block;
  float: left;
  margin-top: 6px;
  margin-right: 15px;
}
 .container {
   padding-top: 10px;
 }
 .pricing {
   box-shadow: 0 4px 8px rgba(0,0,0,.03);
   background-color: #fff;
   border-radius: 3px;
   border: none;
   position: relative;
   margin-bottom: 30px;
   text-align: center;
 }
 .pricing {
   box-shadow: 0 4px 8px rgba(0,0,0,.03);
   background-color: #fff;
   border-radius: 3px;
   border: none;
   position: relative;
   margin-bottom: 30px;
   text-align: center
 }

 .pricing.pricing-highlight .pricing-title {
   background-color: #6777ef;
   color: #fff
 }

 .pricing.pricing-highlight .pricing-cta a {
   background-color: #6777ef;
   color: #fff
 }

 .exchangeBtn:hover {
   background-color: #394eea!important
 }

 .pricing .pricing-padding {
   padding: 40px
 }

 .pricing .pricing-title {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   background-color: #f3f6f8;
   color: #6777ef;
   border-radius: 0 0 3px 3px;
   display: inline-block;
   padding: 5px 15px
 }

 .pricing .pricing-price {
   margin-bottom: 45px
 }

 .pricing .pricing-price div:first-child {
   font-weight: 600;
   font-size: 50px
 }

 .pricing .pricing-details {
   text-align: left;
   display: inline-block
 }

 .pricing .pricing-details .pricing-item {
   display: flex;
   margin-bottom: 15px
 }

 .pricing .pricing-details .pricing-item .pricing-item-icon {
   width: 20px;
   height: 20px;
   line-height: 20px;
   border-radius: 50%;
   text-align: center;
   background-color: #63ed7a;
   color: #fff;
   margin-right: 10px
 }

 .pricing .pricing-details .pricing-item .pricing-item-icon i {
   font-size: 11px
 }

 .pricing .pricing-cta {
   margin-top: 20px
 }

 .pricing .pricing-cta a {
   display: block;
   padding: 20px 40px;
   background-color: #f3f6f8;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   font-size: 18px;
   font-weight: 700;
   text-decoration: none;
   border-radius: 0 0 3px 3px
 }

 .pricing .pricing-cta a .fas,.pricing .pricing-cta a .far,.pricing .pricing-cta a .fab,.pricing .pricing-cta a .fal,.pricing .pricing-cta a .ion {
   margin-left: 5px
 }

 .pricing .pricing-cta a:hover {
   background-color: #e3eaef
 }

</style>
